<template>
  <div class="article-recommend" v-if="articleList.length">
    <h3>相关推荐</h3>
    <div class="article-recommend-list articlelist-content">
      <div
        v-for="item in articleList"
        :key="item.id"
        class="model"
        @click="openLink(item.id)"
      >
        <div class="l">
          <div class="user-info">
            <p @click.stop>
              <nuxt-link target="_blank" :to="`/user/${item.userId}`">{{ item.nickname }}</nuxt-link>
            </p>
            <p>{{ cycleDate(item.createTime) }}</p>
            <p>
              <em
                v-for="itemName in item?.tag.split(';')"
                :key="itemName"
                >{{ tagMap[itemName] || itemName }}</em
              >
              <em class="category-name">{{ categoryMap[item.category] }}</em>
            </p>
          </div>
          <p class="article-title">{{ item.articleTitle }}</p>
          <p class="article-desc">{{ item.description }}</p>
          <div class="a-num">
            <p>
              <a-icon type="eye" /><span v-if="item.viewCounts">{{ item.viewCounts | splitNumber }}</span>
            </p>
            <p
              :class="{ 'is-liker': item.isLiker }"
              @click.stop="isLikeArticle($event, item)"
            >
              <i class="ri-thumb-up-line"></i>
              <span v-if="item.likeCounts">{{ item.likeCounts }}</span>
            </p>
            <p>
              <i class="ri-message-ai-3-line"></i><span v-if="item.commentCounts">{{
                item.commentCounts
              }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { cycleDate } from '~/util'
import { tagMap, categoryMap } from '~/config/optionMap'
export default {
  name: 'ArticleRecommend',
  props: {
    tags: {
      type: String
    },
    articleId: {
      type: String
    }
  },
  data () {
    return {
      articleList: [],
      cycleDate,
      tagMap,
      categoryMap
    }
  },
  created () {
    this.findArticleRecommendList()
  },

  computed: {
    ...mapState({
      userInfo: (state) => state.userInfo
    })
  },

  methods: {
    async findArticleRecommendList () {
      const searchParams = {
        tags: this.tags,
        articleId: this.articleId
      }
      const data = await this.$axios.post('/gimishare/api/v1/articles/recommend', searchParams)
      this.articleList = data.data || []
    },

    /**
     * article liker
     * @param { Object } articleItem
     */
    async isLikeArticle (_e, articleItem) {
      if (!this.userInfo) {
        return this.$store.commit('UPDATE_LOGIN_VISIBLE', true)
      }
      try {
        const API = articleItem.isLiker
          ? '/users/unagreearticle'
          : '/users/agreearticle'
        await this.$axios.get(
          `/gimishare/api/v1${API}?articleId=${articleItem.id}&uid=${articleItem.userId}`
        )
        if (articleItem.isLiker) {
          articleItem.likeCounts -= 1
        } else {
          articleItem.likeCounts += 1
        }
        articleItem.isLiker = !articleItem.isLiker
      } catch (error) {}
    },

    openLink (id) {
      const { href } = this.$router.resolve(`/post/${id}`)
      window.open(href, '_blank')
    }
  }
}
</script>
<style lang="less" scoped>
.article-recommend {
  background: #fff;
  padding: 20px 26px 6px;
  margin-top: 12px;
  border-radius: 4px;
  h3 {
    font-size: 17px;
    font-weight: 600;
    color: #000;
    border-bottom: 1px solid #f1f1f190;
    padding-bottom: 12px;
  }
  &-list {
    .model {
      padding: 12px 0;
      &:last-child {
        border-bottom: none;
      }
      &:hover {
        background-color: transparent;
      }
      .l {
        .user-info {
          padding: 0 0 5px 0;
        }
      }
    }
  }
}
</style>
